window.onload = function () {

	//滚动事件
	$(window).scroll(function () {
		var scrollTop = $(document).scrollTop();
		// console.log(scrollTop);
		if (scrollTop >= 550) {
			$('.head').fadeIn();
		} else {
			$('.head').fadeOut();
		}
	})

	//回到顶部

	$('.head').click(function () {
		$('html,body').animate({ scrollTop: 0 }, 500);
	});

}

// 创建一个类
class index {
	yinCang = 0;
	xianShi = 0
	constructor() {
		// 调用获取节点的方法
		this.tuPian();
		// 调用可以点击页面,跳转图片的方法
		this.daoHang()
		// 调用左箭头修改图片的方法
		this.zuoJT();
		// 调用右箭头修改图片的方法
		this.youJT()
		// 调用自动播放图片的方法	
		this.ziDong()
		// 调用清除定时器的方法,和鼠标移入暂停,移出就再开始播放的方法
		this.clearziDong()

	}

	// 创建一个获取节点的方法
	tuPian() {
		// 获取页面中包含图片的盒子的节点,注意这里获取到的是一个集合
		this.tp = document.querySelectorAll('.swiper-wrapper div');
		// 获取页面中页码的节点,注意这里获取到的是一个集合
		this.yeShu = document.querySelectorAll('.pagination a');

		// 获取页面中右边箭头的节点
		this.you = document.querySelector('.swiper-button-next');

		// 获取页面中右边箭头的节点
		this.zuo = document.querySelector('.swiper-button-prev');

	}
	// 创建一个页码循环以后点击的事件
	daoHang() {
		// 这里设一个代表要隐藏图片的变量
		this.yinCang = 0;
		// 这里设一个代表要显示图片的变量
		this.xianShi = 0;
		// 给获取到的所有的页码,进行遍历的操作,循环出每个页码,// 调用右箭头修改图片的方法
		this.yeShu.forEach((key, val) => {


			//   console.log(val);

			// 给每一页码设置点击事件
			key.onclick = () => {
				// 将当前显示的页码,赋值给要隐藏的页码
				this.yinCang = this.xianShi;
				// 将点击的页码赋值给要显示的页码
				this.xianShi = val;
				//   这里在调用一个可以让图片显示和隐藏的方法
				this.xsys();
			}
		})
	}

	// 创建一个左边箭头实现,图片跳转
	zuoJT() {
		// 给左箭头绑定点击事件
		this.zuo.onclick = () => {

			// 这里是将目前的页数,赋值隐藏的页数,实现目前的页数,隐藏
			this.yinCang = this.xianShi;
			// 这里是将现在的也是自增1;
			this.xianShi--;
			//    这里是要判断一下当,页数小于0 的时候,就将页数强行改为最大的页数,实现可以循环的效果
			if (this.xianShi < 0) {

				this.xianShi = this.tp.length - 1;

			}
			//   这里在调用一个可以让图片显示和隐藏的方法
			this.xsys();

		}
	}

	// 创建一个左边箭头实现,图片跳转
	youJT() {
		// 给左箭头绑定点击事件
		this.you.onclick = () => {
			console.log(11111111);
			// 这里是将目前的页数,赋值隐藏的页数,实现目前的页数,隐藏
			this.yinCang = this.xianShi;
			// 这里是将现在的也是自增1;
			this.xianShi++;
			//    这里是要判断一下当,页数大于最大的最大的页码的时候,就将页数强行改为最大的页数,实现可以循环的效果
			if (this.xianShi > this.tp.length - 1) {
				this.xianShi = 0;
				console.log(this.xianShi);
			}
			//   这里在调用一个可以让图片显示和隐藏的方法
			this.xsys();

		}
	}


	// 这里在创建一个可以让图片自动播放的方法
	ziDong() {
		// 这里创建一个接收定时器返回值的变量
		this.times = '';
		// 这里我们需要
		this.times = setInterval(() => {
			// 这里是将目前的页数,赋值隐藏的页数,实现目前的页数,隐藏
			this.yinCang = this.xianShi;
			// 这里是将现在的也是自增1;
			this.xianShi++;
			//    这里是要判断一下当,页数大于最大的最大的页码的时候,就将页数强行改为最大的页数,实现可以循环的效果
			if (this.xianShi > this.tp.length - 1) {
				this.xianShi = 0;

			}
			this.xsys();
		}, 2000)
	}
	// 创建一个清除定时器的方法,当鼠标移入图片就停止延时器;
	clearziDong() {
		// 给图片绑定移入事件
		// 获取图片最外面的节点
		this.node = document.querySelector('.swiper-container')
		this.node.onmouseover = () => {

			// 清除定时器
			clearInterval(this.times);
		}
		// 给图片绑定移出事件
		this.node.onmouseout = () => {
			//   这里在调用一个可以让图片显示和隐藏的方法
			this.ziDong();
		}

	}

	//   这里在调用一个可以让图片显示和隐藏的方法
	xsys() {
		// 设置上一张图片隐藏
		this.tp[this.yinCang].id = '';
		this.yeShu[this.yinCang].id = '';

		// 设置当前操作的图片显示
		this.tp[this.xianShi].id = 'ac1'
		this.yeShu[this.xianShi].id = 'ac2';
	}


}

// 实例化类的对象 
new index;




class tiaoZhuan {
	constructor() {
		// 调用点击图片跳转到商品列表页面的方法
		this.toGoods();

		//  调用设置秒杀时间的方法
		this.miaoSha();
	}
	// 获取页面中所有的fl的节点,给其绑定点击事件,跳转到商品列表页面
	toGoods() {
		// 注意这是获取页面中所有fl 获取到的是一个集合,必须要循环出每个元素,才可以绑定点击事件
		let fl = document.querySelectorAll('.fl');
		// 循环出每个元素
		fl.forEach((ele) => {
			// 给每个元素设置点击事件
			ele.onclick = () => {
				console.log(11111111);
				// 点击图片跳转页面
				location.assign('./product.html');
			}
		})
	}



	/**********设置秒杀时间**************/
	miaoSha() {
		//  获取小时的节点对象 hour 代表小时
		let hour = this.$('.hour_show');
		console.log(hour);
		//  获取分钟的节点对象 minute 代表分钟
		let minute = this.$('.minute_show');
		console.log(minute);
		//  获取 秒 的节点对象 hosecondur 代表秒
		let second = this.$('.second_show')
		console.log(second);
		// 将获取到的小时中的内容改为,一天的最大小时数(24);
		hour.innerHTML = 23;
		// 将获取到的分钟中的内容改为,改为一个小时的最大数(59);
		minute.innerHTML = 59;
		// 将获取到的秒最大值该为59;
		second.innerHTML = 59;

		// console.log(time);


		//    给获取到秒的节点设置一个定时器
		let times = '';
		
		times = setInterval(() => {
			// 这里是让秒,每秒都字减1
			second.innerHTML--;
			// 这里是判断当秒数小于0的时候,就让分钟减一, 秒数回归为59,实现秒数的循环
			if (second.innerHTML < 0) {
				second.innerHTML = 59;
				minute.innerHTML--;
			}
			// 这里是判断当分钟小于0时 就让小时减一, 分钟回归为59,实现分钟的循环
			if (minute.innerHTML < 0) {
				minute.innerHTML = 59;
				hour.innerHTML--;
			}
			// 这里是判断当小时 小于0时 就让小时,分钟,秒数回归起点, 实现分钟的循环
			if (hour.innerHTML < 0) {
				// 将获取到的小时中的内容改为,一天的最大小时数(24);
				hour.innerHTML = 23;
				// 将获取到的分钟中的内容改为,改为一个小时的最大数(59);
				minute.innerHTML = 59;
				// 将获取到的秒最大值该为59;
				second.innerHTML = 59;
			}
		}, 1000)





	}

	// 创建一个获取节点的方法
	$(ele) {
		// 获取节点
		let node = document.querySelectorAll(ele);

		// 这里是判断一下,如果获取到的节点,只有一个就返回一个节点,如果获取到的节点有多个就返回一个集合		
		return node.length == 1 ? node[0] : node;
	}
}
// 实例化对象
new tiaoZhuan;




class huaDong {

}